<template>
    <div class="bigbox" login-com-dome="bigbox">
        <div class="leftimg">
            <img id="u3979_img" src="https://cdn3.axureshop.com/demo/1634752/images/%E7%99%BB%E5%BD%95_1/u3979.svg"
                alt="">
        </div>
        <div class="content">
            <div id="u3982" style="color:#fff">
                <p style="font-size:40px;" class="qiwei">
                    <span
                        style="font-family:'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;font-weight:650;">
                        登录
                    </span>
                </p>
                <p style="font-size:17px;">
                    <span style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;font-weight:400;">
                        七尾医疗服务后台管理系统
                    </span>
                </p>
            </div>
            <div class="login">
                账号
                <el-input v-model="input" style="width:300px" placeholder="请输入内容">{{ input }}</el-input>
            </div>
            <div class="login">
                密码
                <el-input placeholder="请输入密码" style="width:300px" v-model="password" show-password>{{ password }}
                </el-input>
            </div>
            <div class="remmber" style="font-size:13px;">
                <span style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;font-weight:400;">
                    忘记密码请联系管理员
                </span>
            </div>
            <el-button @click="loginUser" type="success" native-type="button" :round='false'>登录</el-button>
        </div>
        <div class="rightimg">
            <img id="u3980_img" src="https://cdn3.axureshop.com/demo/1634752/images/%E7%99%BB%E5%BD%95_1/u3980.svg"
                alt="">
        </div>
    </div>
</template>
<script>
import { loginFn, userDetail } from "@/api/login";
export default {
    data() {
        return {
            input: '',
            password: ''
        }
    },
    mounted() {

    },
    methods: {
        loginUser() {
            loginFn({ adminname: this.input, password: this.password }).then(res => {
                if (res.code == '10005') {
                    this.$message('账号未注册')
                } else if (res.code == '10003') {
                    this.$message('密码错误')
                } else {
                    this.$message('登录成功')
                    localStorage.setItem('token', res.data.token)
                    localStorage.setItem('adminname', res.data.adminname)
                    localStorage.setItem('loginState', true)
                    localStorage.setItem('checkedkeys', JSON.stringify(res.data.checkedkeys))
                    this.$store.commit('changeLoginState', true)
                    this.$store.commit('changeToken', true)
                    this.$router.push('/home/work')
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.bigbox {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;

    .content {
        height: 400px;
        background-color: rgba(0, 110, 255, 1);
        width: 439px;
        height: 507px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .login {
            background-color: #fff;
            width: 358px;
            box-sizing: border-box;
            padding: 4px 10px;
            margin: 10px;
        }

        .el-button--success:focus,
        .el-button--success {
            background-color: rgba(255, 145, 56, 1);
            width: 82%;
        }

        .el-button--success:focus,
        .el-button--success:hover {
            background-color: rgba(255, 145, 56, 0.89);
        }

        .qiwei {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

        #u3982 {
            margin: 36px 0;
        }

        .remmber {
            width: 358px;
            text-align: right;
            color: #fff;
            margin-bottom: 32px;
        }

    }

    #u3979_img {
        width: 172px;
        height: 560px
    }

    #u3980_img {
        width: 288px;
        height: 560px;
    }
}
</style>
<style lang="scss">
[login-com-dome="bigbox"] .content .login .el-input .el-input__inner {
    border: none;
}
</style>